import React from "react";
import { Navigate, useLocation } from "react-router-dom";

// 封装 路由 守卫 的 高阶函数：
const FrontendAuth = (props) => {
    const { routerConfig } = props;
    const pathname = useLocation().pathname;
    const isLogin = localStorage.getItem('Token');
    // 如果 该路由 不用进行 权限校验，登录状态下 登录页 除外，
    // 因为 登录 后，无法 跳转到 登录页，
    // 这 部分代码， 是为了在 非登录状态下，访问 不需要 权限 校验的路由；
    const targetRouterConfig = routerConfig.find(
        (item) => item.path === pathname
    )

    if (targetRouterConfig && !targetRouterConfig.auth && !isLogin) {
        // 如果 不需要 登录 权限，也 没有登录：那么，
        // 不用管它！
        const { element } = targetRouterConfig;
        return element;
    }
    if (isLogin) {
        // 如果是 登录状态，想要 跳转到 登录页，则 重定向到主页
        if (pathname === '/login') {
            return <Navigate to='/' replace={true} />
            // 或者 是 navigate replace ？
        } else {
            // 如果 路由 合法？？ 
            // 什么是 合法呢？ =>
            // targetRouterConfig 这个 返回的是 true，因为 能够find 到！
            // 就跳转到 相应 的页面过去，
            if (targetRouterConfig) {
                return targetRouterConfig.element;
            } else {
                // 因为找不到那个页面，所以，就要 重定向到 首页？ 还是 error 页？
                return <Navigate to='/error' replace={true} />;

            }
        }
    } else {
        // 如果是 非登录状态 下：
        // 如果 路由 合法（能查找到，而且 需要 校验的 时候，就要 跳转到 登录 页面 去， 要求登录！）
        if (targetRouterConfig && targetRouterConfig.auth) {
            return <Navigate to='/login' replace={true} />;
        }
        // 如果是 非登录状态下：
        // 如果 路由 不合法（不能查找到就要 跳转到 Error 页面 去）
        else {
            return <Navigate to='/error' replace={true} />
        }
    }
    // }
}

export default FrontendAuth;

